<template>
    <div class="login-container">
        <ElRow class="login-row">
            <ElCol :span="12" :xs="0">
                <div class="cover">
                    <!-- 左侧图片 -->
                </div>
            </ElCol>
            <ElCol :span="12" :xs="24">
                <!-- 右侧表单 -->
                <ElForm class="login-form" ref="loginFormRef" :model="userInfo" :rules="checkFormRoles"
                    label-width="auto" label-position="left" size="large" hide-required-asterisk>
                    <h1>{{ platformName }}</h1>
                    <div class="login-form-main">
                        <ElFormItem class="login-form-item" label="用户名" prop="username">
                            <template #label>
                                <span class="login-label">用户名</span>
                            </template>
                            <ElInput clearable v-model="userInfo.username" :prefix-icon="User" placeholder="请输入用户名">
                            </ElInput>
                        </ElFormItem>
                        <ElFormItem class="login-form-item" label="密码" prop="password">
                            <template #label>
                                <span class="login-label">密&nbsp;&nbsp;&nbsp;&nbsp;码</span>
                            </template>
                            <ElInput clearable v-model="userInfo.password" type="password" show-password
                                :prefix-icon="Lock" placeholder="请输入密码">
                            </ElInput>
                        </ElFormItem>
                        <ElFormItem class="login-form-item">
                            <ElButton class="login-submit" type="primary" @click="submitLogin" :loading="isLoging">登录
                            </ElButton>
                        </ElFormItem>
                    </div>
                </ElForm>
            </ElCol>
        </ElRow>
    </div>
</template>

<script setup lang="ts">
import type { UserLoginRequestDTO } from '@/api/sysAuth/sysAuthType';
import router from '@/router';
import useAuthStore from '@/stores/useAuthStore';
import { getTimePeriodsStr } from '@/utils/dateTimeUtil';
import { Lock, User } from '@element-plus/icons-vue';
import { ElButton, ElCol, ElForm, ElFormItem, ElInput, ElNotification, ElRow, type FormInstance, type FormRules } from 'element-plus';
import { reactive, ref } from 'vue';
import setting from '@/setting/index'

let { platformName } = setting
// 从pinia取出需要的内容
let authStore = useAuthStore()
// 登录表单
let loginFormRef = ref<FormInstance>()
// 登录表单信息
let userInfo: UserLoginRequestDTO = reactive({
    username: 'superAdmin',
    password: 'admin123456'
})
let isLoging = ref(false)

// 登录表单检查
const checkFormRoles = reactive<FormRules<UserLoginRequestDTO>>({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 4, max: 10, message: '用户名长度为4 - 10', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ]
})

// 登录请求发送
async function submitLogin() {
    // 表单校验，失败会抛出异常
    await loginFormRef.value?.validate()

    isLoging.value = true

    authStore.loginAndCache(userInfo)
        .then(async () => {
            await authStore.initUserInfoAndCache()

            router.replace('/')
            isLoging.value = false
            ElNotification({
                title: `Hi, ${getTimePeriodsStr()}好！`,
                message: '欢迎回来',
                type: 'success',
            })
        }).catch(() => {
            isLoging.value = false
        })
}
</script>

<style scoped lang="scss">
.login-container {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50vw;
    height: 70vh;
    padding: 30px;
    background-color: #FFFDFE;
    border-radius: 20px;
    transform: translate(-50%, -50%);

    .login-row {
        height: 100%;


        .cover {
            height: 100%;
            border-radius: 20px;
            background-image: url("@/assets/images/login_bg.png");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .login-form {
            position: relative;
            height: 70%;
            width: 75%;
            top: 20%;
            left: 10%;
            text-align: left;
            font-weight: 700;
            padding: 10px;

            h1 {
                font-size: 30px;
                margin: 20px 0;
            }

            .login-form-main {
                margin-top: 40px;

                .login-form-item {
                    margin-top: 35px;
                }

                .login-submit {
                    width: 100%;
                }
            }
        }
    }
}
</style>